<template>
    <vxe-modal v-model="addCompanyStore.show"
               :loading="addCompanyStore.loading"
               :width="800"
               :height="400"
               title="新增机构">
        <vxe-form
            ref="formRef"
            border
            title-background
            title-align="left"
            title-width="110"
            title-overflow
            :data="addCompanyStore.formData">

            <vxe-form-item title="机构全称"
                           field="orgName"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构全称', icon: 'vxe-icon-chart-bar-x' }">
                <vxe-input v-model="addCompanyStore.formData.orgName" placeholder="请输入机构全称"/>
            </vxe-form-item>

            <vxe-form-item title="机构简称"
                           field="orgSimpleName"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构简称', icon: 'vxe-icon-company' }">
                <vxe-input v-model="addCompanyStore.formData.orgSimpleName" placeholder="请输入机构简称"/>
            </vxe-form-item>

            <vxe-form-item title="联系电话"
                           field="phone"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构联系电话', icon: 'vxe-icon-pc' }">
                <vxe-input v-model="addCompanyStore.formData.phone" placeholder="请输入联系电话"/>
            </vxe-form-item>

            <vxe-form-item title="联系邮箱"
                           field="email"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构联系邮箱', icon: 'vxe-icon-envelope' }">
                <vxe-input v-model="addCompanyStore.formData.email" placeholder="请输入联系邮箱"/>
            </vxe-form-item>

            <vxe-form-item align="right" span="24">
                <template #default="{ data }">
                    <vxe-button
                        status="primary"
                        icon="vxe-icon-save"
                        @click="submitForm(data)"
                        content="保存"/>
                </template>
            </vxe-form-item>
        </vxe-form>
    </vxe-modal>
</template>

<script setup lang="ts">
import { useAddCompanyStore } from "@/store/UseAddCompanyStore.ts";
import { AddCompanyFormData } from "@/entiy/form/AddCompanyFormData.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import { useCompanyInfoManagerStore } from "@/store/UseCompanyInfoManagerSotre.ts";

const addCompanyStore = useAddCompanyStore();
const companyInfoManagerStore = useCompanyInfoManagerStore();

// 提交事件
const submitForm = (data: AddCompanyFormData) => {
    addCompanyStore.loading = true;
    addCompanyStore.addNewCompany(data).then(_data => {
        companyInfoManagerStore.queryOrgTreeList().then();
    }).catch(error => {
        MessageUtils.showErrorMessage(error.message)
    }).finally(() => {
        addCompanyStore.show = false
        addCompanyStore.loading = false;
        addCompanyStore.formData = {} as AddCompanyFormData;
    });
}
</script>